<template>
  <div class="edit">
    <ball-header :leftArrow="false" title="修改资料" :border="false" z-index="5">
      <div slot="left" @click="$router.back(-1)"><van-icon name="arrow-left" size="24" color="#000000" /></div>
    </ball-header>
    <div class="container">
      <van-form @submit="edit" label-align="left" input-align="right">
        <!-- <van-field name="account" label="手机号码" v-model="form.account" disabled right-icon="bag-o" /> -->
        <van-field class="pic" name="avatar" label="头像">
          <template slot="input" >
            <van-uploader max-count='1' v-model="avatar" :after-read="afterRead" :before-delete="delAvatar" />
          </template>
        </van-field>
        <van-field name="nickname" label="昵称" v-model="form.nickname" placeholder="请填写昵称" />
        <van-field name="switch" label="修改密码">
          <template slot="input">
            <van-switch v-model="switchChecked" size="20" />
          </template>
        </van-field>
        <template v-if="switchChecked">
          <van-field name="password" label="新密码" type="password" v-model="form.password" placeholder="请输入新密码" />
          <van-field name="password_confirm" label="确认新密码" type="password" v-model="form.password_confirm" placeholder="请确认新密码" />
        </template>
        <div style="margin: 16px; 0">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import ballHeader from 'components/header'
import api from 'api'
import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)

export default {
  components:{
    ballHeader
  },
  data() {
    return {
      avatar:[],
      switchChecked:false,
      form:{
        avatar:'',
        nickname:'',
        account:'',
        password:'',
        password_confirm:''
      },
    }
  },
  activated() {
    // console.log("activated",this.userInfo)
    let o = {
      url:this.userInfo.avatar
    }
    this.avatar = this.userInfo.avatar?[o]:[]
    this.form.account = this.userInfo.account
    this.form.nickname = this.userInfo.nickname
    this.form.avatar = this.userInfo.avatar
  },
  methods: {
    edit(){
      // console.log(this.form)
      let loading = Toast.loading("修改中...")
      if(this.checkForm(this.form)){
        api.post("/index/updateProfile",this.form).then(e=>{
          loading.clear()
          let params = {
            avatar:this.form.avatar?this.form.avatar:"",
            nickname:this.form.nickname?this.form.nickname:""
          }
          this.$store.commit("user/change_member",params)
          Toast.success({message:"修改成功",duration:800})
          setTimeout(()=>{
            this.$router.go(-1)
          },800)
        })  
      }
    },
    checkForm(form){
      if(form.password != form.password_confirm){
        Toast.fail("密码不一致")
        return false
      }else{
        return true
      }
    },
    afterRead(e){
      let loading = Toast.loading("上传中...")
      api.post("/home/upload/avatar.html",{file:e.file}).then(res=>{
        loading.clear()
        Toast.success({message:"上传成功",duration:800})
        this.form.avatar = res.data.src
      })
    },
    delAvatar(e){
      this.form.avatar = ""
      return true
    }
  },
  computed:{
    userInfo(){
      return this.$store.state.user.userInfo.member
    }
  }
}
</script>

<style scoped>
  .edit{
    min-height: 100vh;
    background-color: #f2f3f5;
  }
  .container{
    margin-top: 20px;
  }
  .container .pic >>> .van-uploader__upload,.container .pic >>> .van-uploader__preview-image,.container .pic >>> .van-uploader__file{
    width: 60px;
    height: 60px;
    /* border-radius: 50%; */
  }
</style>